<template>
	<view class="com_mask_bg" :class="{ on: on }">
		<view class="com_mask_content" :class="ani_position">
			<view class="com_mask" @touchmove.stop.prevent="moveHandle" @click.stop="mask_click()"></view>
			<view class="ani_view" :class="ani_type">
				<block v-if="popup_type == -1">
					<slot></slot>
				</block>

				<block v-else-if="popup_type == 1">
					<!-- 优惠券弹框 -->
					<view class="com_mask_view" :style="{ paddingBottom: `${COMMON_VAR.safeAreaInsets_bot}rpx` }">
						<view class="com_mask_title" :class="objJudge(popup_config.title_class) ? popup_config.title_class : ''">
							<view class="title"  v-if="objJudge(popup_config.title)">
								{{ popup_config.title }}
							</view>

							<view @click.stop="close_click()" class="com_close" v-if="show_close">
								<image src="/static/images/guizeguanbi.png" mode="widthFix" class="com_close_img"></image>
							</view>
						</view>

						<slot></slot>

						<view class="com_mask_btn" @click.stop="popup_btn_click()" v-if="objJudge(popup_config.confirm)">
							<view class="com_bot_btn">
								{{ popup_config.confirm }}
							</view>
						</view>
					</view>
				</block>

				<block v-else-if="popup_type == 2">
					<view class="com_modal_view">
						<view class="modal_title" v-if="objJudge(popup_config.title)">
							<view class="title">
								{{ popup_config.title }}
							</view>
						</view>

						<view class="modal_con" v-if="objJudge(popup_config.content)">
							<text class="modal_con_tt">{{ popup_config.content }}</text>
						</view>

						<view class="modal_inp" v-if="objJudge(popup_config.placeholder)">
							<!-- 更新表单项 -->
							<view class="inp_view">
								<input
									v-model="popup_value"
									:focus="on"
									:type="back_input_type(popup_config)"
									:placeholder="popup_config.placeholder"
									class="inp"
									@input="popup_type_input($event)"
								/>
								<!-- :auto-blur="true" -->
							</view>
						</view>

						<view class="modal_btn jj_kt_a" v-if="objJudge(popup_config.cancel) || objJudge(popup_config.confirm)">
							<view
								class="btn cancel_btn"
								:class="{ touch: active_btn == 'cancel' }"
								@touchmove.stop.prevent="moveHandle"
								@touchstart="view_down('cancel')"
								@touchend="view_up"
								@click.stop="popup_btn_click(-1)"
								v-if="objJudge(popup_config.cancel)"
							>
								<text class="tt">{{ popup_config.cancel }}</text>
							</view>
							<view
								class="btn confirm_btn"
								:class="{ touch: active_btn == 'confirm', jj_kl_a: objJudge(popup_config.cancel) }"
								@touchmove.stop.prevent="moveHandle"
								@touchstart="view_down('confirm')"
								@touchend="view_up"
								@click.stop="popup_btn_click(1)"
							>
								<text class="tt">{{ popup_config.confirm }}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'mypopup',
	props: {
		show_width: {
			type: [Number, String],
			default: '750',
		},
		on: {
			type: [Boolean],
			default: false,
		},

		// bot_top 底部向上
		ani_type: {
			type: [String],
			default: 'bot_top',
		},

		ani_position: {
			type: [String],
			default: 'bot',
		},
		//  -1 自定义
		//  1 左侧标题 底部按钮
		//  2 modal 模态确认框
		popup_type: {
			type: [Number, String],
			default: -1,
		},
		con_title: {
			type: [String],
			default: '',
		},

		btn_tt: {
			type: [String, Boolean],
			default: '确认',
		},
		show_close: {
			type: [Boolean],
			default: true,
		},
		popup_config: {
			type: [Object],
			default: {
				title: '',
				cancel: '',
				confirm: '',
			},
		},
	},
	data() {
		return {
			popup_value: '',
			active_btn: '',
			back_data: {},
			focus_on: false,

			focus_task: null,
		};
	},
	created() {
		this.init_pagedata('mypopup');
		// console.log(this.popup_config, 'popup_config')
	},
	watch: {
		popup_config: {
			handler(newVal) {
				// console.log(newVal, 'skuid')
				this.init_components();
			},
			immediate: true,
			deep: true,
		},
		// on: {
		// 	handler(newVal) {
		// 		let _this = this;
		// 		if (newVal) {
		// 			_this.focus_on = false
		// 			clearTimeout(_this.focus_task);
		// 			_this.focus_task = setTimeout(() => {
		// 				if (_this.on) {
		// 					_this.focus_on = true
		// 				} else {
		// 					_this.focus_on = false
		// 				}
		// 			}, 500);
		// 		} else {
		// 			_this.focus_on = false
		// 		}

		// 	}
		// }
	},
	computed: {},
	methods: {
		back_input_type(v) {
			let { inp_type = 'number' } = v;
			let type = 'number';
			if (this.objJudge(inp_type)) {
				if (inp_type == 'negative') {
					type = 'text';
				} else {
					type = inp_type;
				}
			}
			return type;
		},
		popup_type_input(event) {
			let _this = this;
			let { inp_type = 'number' } = _this.popup_config;
			let _value = event.detail.value;
			if (inp_type == 'number') {
				// 只要正数字
				_this.$nextTick(() => {
					let reg = /[^\d]/g;
					_value = _value.replace(reg, '');
					this.popup_value = _value;
				});
			} else if (inp_type == 'negative') {
				// 可能会是负数
				_this.$nextTick(() => {
					let reg = /[^\d.-]/g;
					_value = _value.replace(reg, '');
					if (_value.indexOf('-') > -1) {
						// 检查是否有负号
						if (_value.startsWith('-')) {
							// 如果负号在开头，保留它，然后删除其余的负号
							_value = '-' + _value.slice(1).replace('-', '');
						} else {
							_value = _value.replace('-', '');
						}
					}
					this.popup_value = _value;
				});
			} else if (inp_type == 'text') {
				_this.$nextTick(() => {
					let reg = /[\u4e00-\u9fa5\s]/g;
					_value = _value.replace(reg, '');

					this.popup_value = _value;
				});
			}
		},

		onkeydown(event) {
			console.log(event);
		},
		init_components() {
			if (this.objJudge(this.popup_config.placeholder)) {
				this.popup_value = this.popup_config.inp_value;
			}
		},
		view_down(v) {
			// console.log("view_down");
			this.active_btn = v;
		},
		view_up() {
			// console.log("view_up");
			this.active_btn = '';
		},

		moveHandle() {
			// 禁止原生滚动
		},
		popup_btn_click(type) {
			let item = {};
			if (type == 1) {
				item = this.popup_config;
				this.$set(item, 'popup_key', this.popup_value);
			}
			this.$emit('popup_btn_click', {
				type,
				item,
			});
		},
		mask_click() {
			this.$emit('mask_click', { popup_type: this.popup_type });
		},
	},
};
</script>

<style lang="scss">
.com_mask_bg {
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 990;
	visibility: hidden;

	&.on {
		visibility: visible;

		.com_mask {
			opacity: 1;
			visibility: visible;
		}

		.ani_view {
			&.bot_top {
				transform: translateY(0%);
			}

			&.scale {
				transition: all 0s;
				opacity: 1;
				// transform: scale(1);
			}
			&.scale_ani {
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	.com_mask_content {
		width: 750rpx;
		height: 100vh;
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;

		&.bot {
			justify-content: flex-end;
		}

		&.top {
			justify-content: flex-start;
		}

		&.center {
			justify-content: center;
		}
	}

	.com_mask {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.55);
		position: absolute;
		left: 0;
		right: 0;
		z-index: 1;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
	}

	.ani_view {
		position: relative;
		z-index: 2;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		// width: 750rpx;
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;

		&.bot_top {
			transform: translateY(100%);
		}

		&.scale {
			opacity: 0;
			transform: scale(1);
		}

		&.scale_ani {
			transition: all 0.3s;
			opacity: 0;
			transform: scale(0.63);
		}
	}
}

.com_mask_view {
	background-color: #ffffff;

	.com_mask_title {
		position: relative;
		padding: 0 30rpx;
		height: 90rpx;

		display: flex;
		align-items: center;

		.com_close {
			height: 90rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.com_mask_btn {
		padding: 12rpx 36rpx;
	}
}

.com_modal_view {
	width: 600rpx;
	border-radius: 20rpx;
	background-color: #ffffff;
	overflow: hidden;

	.modal_title {
		position: relative;
		padding: 0 30rpx;
		height: 90rpx;

		display: flex;
		align-items: center;
		justify-content: center;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.modal_con {
		// min-height: 184rpx;
		padding: 70rpx 40rpx;
		text-align: center;

		.modal_con_tt {
			line-height: 1.4;
			font-size: 32rpx;
			// font-weight: bold;
			color: #333333;
		}
	}

	.modal_inp {
		// min-height: 184rpx;
		padding: 38rpx 30rpx 48rpx;
		text-align: center;

		.inp_view {
			height: 82rpx;
			background: #f7f7f7;
			border-radius: 10rpx;
			padding: 0 20rpx;
			text-align: center;

			.inp {
				height: 82rpx;
				font-size: 28rpx;
				font-weight: 400;
				// color: #999999;
			}
		}
	}

	.modal_btn {
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;

			&.touch {
				background-color: #e5e5e5;
			}
		}

		.cancel_btn {
			font-size: 32rpx;
			font-weight: 400;
			color: #999999;
		}

		.confirm_btn {
			font-size: 32rpx;
			font-weight: 400;
			color: #1fd5ca;
		}
	}
}
</style>
